<template>
	<div class="conbox designs">
		<div class="decotent">
			<div class="styleclass">
				<div class="stycontent">
					<p>最多选择5个{{title}}</p>
				</div>
			</div>
			<checkbox-group class="checkbox_group" @change="checkboxChange">
				<div class="btngroup" v-for="(item,index) in showstyle" :key="index">
					<checkbox :value="item.id" :checked="item.status" class="ckecked" :data-id="item.id"/>
					<span class="labtext" :class="{active:item.status==true}">{{item.name}}</span>
				</div>
			</checkbox-group>
		</div>
		<footer class="save_footer pub_fotter" @click="savename()">
			<a>保存</a>
		</footer>
	</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { getUser, getBasicUser } from '@/utils/auth.js'
import { editpersondata, getpersondata } from '@/api/persondata'

export default {
	name: 'editStyle',
	data() {
		return {
			isactive: -1,
			pfooter: false,
			arr: [],
			nick_name: '',
			working_years: '',
			address: '',
			areadec: '',
			stylelenth: '',
			contact_phone: '',
			wechat_number: '',
			user_picture: '',
			wechat_qrcode: '',
			motto: '',
			good_at_style: '',
			is_display_contact: 1,
			gstylelist: '',
			business_scope_type: '',
			showstyle: [],
			city_id: '',
			district_id: '',
			province_id: '',
			owner_user_id: '',
			title: '经营范围',
			source: 'range',
			sumdata: '',
			public: []
		}
	},
	mounted() {
		this.init()
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		let source = opcation.source
		this.source = source
		if (source == 'range') {
			this.title = '经营范围'
			uni.setNavigationBarTitle({
				title: '经营范围'
			})
		} else {
			this.title = '擅长风格'
			uni.setNavigationBarTitle({
				title: '擅长风格'
			})
		}
	},
	methods: {
		init() {
			getUser(true).then(res => {
				let data = res
				this.sumdata = res
				if (this.$util.isEmpty(data.good_at_style)) {
					data.good_at_style = {}
				}
				if (this.$util.isEmpty(data.business_scope_type)) {
					data.business_scope_type = {}
				}
				if (this.source === 'range') {
					this.showstyle = Object.keys(data.option.businessScopeType).map(i => ({
						status: Object.keys(data.business_scope_type).map(j => data.business_scope_type[j]).includes(data.option.businessScopeType[i]),
						name: data.option.businessScopeType[i],
						id: i
					}))
				} else {
					this.showstyle = Object.keys(data.option.decorationStyle).map(i => ({
						status: Object.keys(data.good_at_style).map(j => data.good_at_style[j]).includes(data.option.decorationStyle[i]),
						name: data.option.decorationStyle[i],
						id: i
					}))
					console.log('showstyle', this.showstyle)
				}
				this.user_picture = data.user_picture
				this.wechat_qrcode = data.wechat_qrcode
				this.nick_name = data.nick_name
				this.working_years = data.working_years
				this.address = data.full_address
				let good = data.good_at_style
				let business_scope = data.business_scope_type
				// console.log(Object.keys(good))
				this.gstylelist = Object.keys(good).join(',')
				this.business_scope_type = Object.keys(business_scope).join(',')
				this.contact_phone = data.contact_phone
				this.wechat_number = data.wechat_number
				this.motto = data.motto
				this.city_id = data.city_id
				this.district_id = data.district_id
				this.province_id = data.province_id
			})
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none',
				duration: 1500
			})
		},
		choose(index, event) {
			this.showstyle[index].status = !this.showstyle[index].status
		},
		checkboxChange(e) {
			let datalist = this.showstyle
			let choock = e.detail.value
			for (let i in datalist) {
				this.showstyle[i].status = false
			}
			choock.forEach((key, index) => {
				for (let j in datalist) {
					if (key == datalist[j].id) {
						this.showstyle[j].status = true
					}
				}
			})
			this.public = choock.join(',')
		},
		savename() {
			let datalist = this.showstyle
			let style_id = []
			for (let i in datalist) {
				if (datalist[i].status == true) {
					style_id.push(datalist[i].id)
				}
			}
			if (style_id.length > 5) {
				this.msg('最多选5个')
				uni.showToast({
					title: '最多选5个',
					icon: 'none',
					duration: 1500
				})
			} else {
				style_id = style_id.join(',')
				this.gstylelist = style_id
				if (this.gstylelist.length == 0) {
					if (this.source !== 'range') {
						this.msg('还未选择分风格')
					} else {
						this.msg('还未选择分范围')
					}
				} else {
					let form = {}
					let params = {}
					if (this.source !== 'range') {
						// form.good_at_style = JSON.stringify(style_id)
						form.good_at_style = this.public
						// form.good_at_style = this.gstylelist
						params.business_scope_type = this.business_scope_type
					} else {
						form.business_scope_type = []
						// form.business_scope_type = JSON.stringify(style_id)
						form.business_scope_type = this.public
						params.good_at_style = this.gstylelist
					}
					params = {
						nick_name: this.nick_name,
						user_picture: this.user_picture,
						province_id: this.province_id,
						city_id: this.city_id,
						district_id: this.district_id,
						full_address: this.areadec,
						contact_phone: this.contact_phone,
						wechat_number: this.wechat_number,
						wechat_qrcode: this.wechat_qrcode,
						working_years: this.working_years,
						motto: this.motto,
						is_display_contact: this.is_display_contact,
						...form
					}
					editpersondata(params).then((res) => {
						if (res.status == 'success') {
							this.msg(res.data)
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {

						}
					})
				}
			}
		}
	}
}
</script>

<style scoped>
	.decotent {
		/*margin-top: 88px;*/
		width: 100%;
		height: auto;
		background: white;
	}

	.styleclass {
		width: 100%;
		height: auto;
		float: left;
		background: white;
	}

	.stycontent {
		width: 90%;
		height: auto;
		float: left;
		margin-left: 5%;
	}

	.styleclass p {
		color: #666666;
		margin-top: 20px;
	}

	.styleclass .styles {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 30px;
		padding-bottom: 30px;
	}

	.styleclass .styles a {
		width: 210px;
		height: 90px;
		text-align: center;
		line-height: 90px;
		border-radius: 45px;
		float: left;
		font-size: 36px;
		margin-left: 15px;
		margin-top: 30px;
		border: 2px solid #dddddd;
	}

	.styleclass .styles a:nth-child(3n+1) {
		margin-left: 0;
	}

	.styleclass .styles .active {
		color: #3a1b04;
		background: #ffd11a;
	}

	footer {
		line-height: 90px;
		color: black;
		font-size: 24px;
		background: #ffd11a;
	}
	.checkbox_group{
		float: left;
		width: 92%;
		margin-left: 4%;
		margin-bottom: 90px;
	}
	.btngroup{
		width: 200px;
		height:90px;
		float: left;
		margin-left: 30px;
		margin-top: 30px;
		border-radius: 45px;
	}
	.checkbox_group .btngroup:nth-child(3n+1) {
		margin-left: 0;
	}
	.checkbox_group .ckecked{
		width: 200px;
		height:90px;
		z-index: 999;
		opacity: 0;
		float: left;
		position: absolute;
		background: green;
	}
	.checkbox_group .labtext{
		width: 200px;
		height:90px;
		left: 0;
		float: left;
		font-size: 24px;
		border-radius: 45px;
		text-align: center;
		line-height: 90px;
		background: white;
		position: relative;
		border: 2px solid #dddddd;
	}
	.checkbox_group .active{
		color: #3a1b04;
		background: #ffd11a;
	}
</style>
